Day28: Gitflow 合併與觸發部署、Backlogs 完善

2022 iThome 鐵人賽

DAY 28

DevOps

一個人也能 DevOps ? 用 Angular + Spring Boot 演示專案由開發到部署系列第 28 篇

14th鐵人賽

孤單威廉

2022-10-13 23:39:30

646 瀏覽

分享至

昨天我們建立好了 SQL Server，並完成了 Repository 的建置，今天，讓我們把資料存進去，並且完善我們的 Backlogs。最後，我們再一起把 Feature 分支合併到 Developer 內部。

Repository 的注入

昨天我們完成了 Repository、po、dao 的建立，目前的專案資料夾格式會長這樣:

接著，我們在 ServiceImpl 內注入 Repository，並將取得的資料儲存到 DB 內部:

@Slf4j
@Service
public class ColorCodeServiceImpl implements ColorCodeService {

	@Autowired
	private ColorCodeEntityRepository colorCodeEntityRepository;

	@Override
	public List<String> getColorCodeTags(MultipartFile picture) {

		List<String> rgbList = scanWholePicture(picture);
		List<String> hexList = rgbToHexList(rgbList);	
		ColorCodeEntity colorCodeEntoty = new ColorCodeEntity();
		colorCodeEntoty.setColorCodeString(listToString(hexList));
		colorCodeEntityRepository.save(colorCodeEntoty);
		return hexList;
	}
    
    	private String listToString(List<String> rgbList) {

		StringBuffer sb = new StringBuffer();
		for (int i = 0; i < rgbList.size(); i++) {
			sb.append(rgbList.get(i));
			if (i != rgbList.size() - 1) {
				sb.append(",");
			}
		}
		return sb.toString();
	}
  
    //下略

再來，我們在本機用 postman 傳送照片，則可以發現資料成功的被存入 DB 內部了。

分群數量

再來，我們要實現用戶可以選擇要間照片分為 3、5、7 種顏色，我們可以將 Button 與參數綁定，並傳到後端判斷後作為分群的數，或是拆分成不同的 API；此時不論如何實踐，都應盡量避免直接從前端獲取數字當作分群的數量，因有可能請求遭到竄改，被改成 100 群，那伺服器可能會因此崩潰。這裡採用 switch case 的方式判斷，並將結果只控制在 3、5、7 內。

	@PostMapping("/getColorTags")
	@ResponseBody
	public List<String> getColorTag(@RequestParam("file") MultipartFile picture, @RequestParam("groupNum") String groupNum) {
		List<String> rtnTagsList = colorCodeService.getColorCodeTags(picture, groupNum);
		return rtnTagsList;
	}

	private Integer vaildGroupString(String groupNum) {
		int i = 5;
		switch (groupNum) {
		case "three":
			i = 3;
			break;
		case "five":
			i = 5;
			break;
		case "seven":
			i = 7;
			break;
		}
		return i;
	}

Angular 調整

接著，我們依照需求調整前端頁面，在結果的欄位內增加兩個額外的按鈕，以及用於提供複製色碼的 Input 欄位。

        <div style="margin-bottom: 20px">
          <button class="btn btn-primary " (click)="onUpload(three)">
            <b> 3 </b>
          </button>

          <button class="btn btn-primary" (click)="onUpload(five)" style="margin-left: 30px; margin-right: 30px;">
            <b> 5 </b>
          </button>

          <button class="btn btn-primary " (click)="onUpload(seven)">
            <b> 7 </b>
          </button>
        </div>

        <div class="input-group mb-3">
          <input type="text" class="form-control" value={{colorString}} aria-label="" aria-describedby="button-addon2" #inputvalue>
          <button class="btn btn-outline-secondary" type="button" id="button-addon2" (click)="copyString(inputvalue)" >Copy</button>
        </div>

另外依照不同的按鈕對後端傳入不同的字串。

  upload(file:any, groupNum:string): Observable<any> {
    const formData = new FormData();

    formData.append("file", file, file.name);
    formData.append("groupNum", groupNum);

    return this.http.post(this.getColorURL, formData)
  }

最後，我們在本地進行前後端的測試:

Demo